<template>
  <div>
    <el-card class="box-carder" shadow="hover">
      <div>
        <el-icon
          size="large"
          @click="returnBefore"
          style="float: left; cursor: pointer"
          ><ArrowLeft
        /></el-icon>
      </div>
      <div class="inputbox">
        <el-input
          v-model="input"
          class="w-50 m-2"
          @keyup.enter="searchContent"
          size="large"
          style="border-radius: 6px"
          placeholder="Please Input"
          :prefix-icon="Search"
        />
      </div>
    </el-card>
  </div>
  <div style="margin: auto; width: 73%" v-if="userexist">
    <el-card shadow="hover" style="margin-top: 10px; height: 130px">
      <el-scrollbar>
        <div class="scrollbar-flex-content">
          <div v-for="item in data1" :key="item" style="margin-left: 50px">
            <el-avatar
              size="large"
              :src="item.headImag"
              @click="goTo(item.userId)"
            />
            <div style="font-family: '黑体'">
              {{ item.nickName }}
            </div>
          </div>
        </div>
      </el-scrollbar>
    </el-card>
  </div>
  <div style="margin: auto; width: 100%; margin-top: 20px">
    <pInfor :foo="searchDetail" style="width: 73%"></pInfor>
  </div>
</template>
<script setup>
import { ArrowLeft, Search } from '@element-plus/icons-vue'
import pInfor from '../components/firstPage/pInfor.vue'
import { useRoute } from 'vue-router'
import axios from 'axios'
import { ref } from 'vue'
import { onMounted } from '@vue/runtime-core'
import router from '@/router'
const routerView = useRoute()
const searchDetail = ref([])
const data1 = ref([])
const input = ref('')
const userexist = ref(true)
onMounted(() => {
  searchQuest()
})

function searchQuest() {
  axios({
    url: 'http://localhost:8080/search',
    method: 'post',
    contentType: 'application/json',
    headers: {
      token: localStorage.getItem('token')
    },
    data: {
      content: routerView.query.inputValue
    }
  }).then(function (res) {
    searchDetail.value = res.data.data.dynamics
    data1.value = res.data.data.users
    if (data1.value.length === 0) {
      userexist.value = false
    }
  })
}

function searchContent() {
  axios({
    url: 'http://localhost:8080/search',
    method: 'post',
    contentType: 'application/json',
    headers: {
      token: localStorage.getItem('token')
    },
    data: {
      content: input.value
    }
  }).then(function (res) {
    searchDetail.value = res.data.data.dynamics
    data1.value = res.data.data.users
    console.log('人' + data1.value)
    if (data1.value.length === 0) {
      userexist.value = false
    }
  })
}

function returnBefore() {
  router.go(-1)
}

function goTo(userId) {
  alert(userId)
  router.push('myMessage?userId=' + userId)
}
</script>
<style hang="scss">
.box-carder {
  width: 73%;
  height: 70px;
  margin-left: 215px;
}

.inputbox {
  width: 90%;
  border-radius: 20px;
  margin-top: -5px;
  display: flex;
  margin-left: 50px;
}
.scrollbar-flex-content {
  display: flex;
}
.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-danger-light-9);
  color: var(--el-color-danger);
}
</style>
